<template>
  <div class="blogs">
    <div class="list" v-for="item in blogs" :key="item.id">
      <div class="content">
        <div class="left">
          <div class="sub_title" @click="gotoDetail(item)">{{ item.title }}</div>
          <div class="sub_content">{{ item.description }}</div>
          <div class="sub_bottom">
            <div class="detail">
              <el-image :src="item.avatar" lazy fit="cover" />
              <div class="name">{{ item.nickname }}</div>
              <div class="time">
                <i class="el-icon-date" style="margin-right: 5px"></i>
                <span>{{ item.createTime }}</span>
              </div>
              <div class="views">
                <i class="el-icon-view" style="margin-right: 5px"></i>
                <span>{{ item.views }}</span>
              </div>
              <div class="comment">
                <i class="el-icon-chat-line-round" style="margin-right: 5px"></i>
                <span>{{ item.commentCount }}</span>
              </div>
            </div>
            <div class="flag">{{ item.typeName }}</div>
          </div>
        </div>
        <div class="right">
          <el-image :src="item.firstPicture ? item.firstPicture : 'https://test-1256689020.cos.ap-nanjing.myqcloud.com/images/sky.jpg'" lazy fit="cover" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import indexApi from '@/api/home'
export default {
  name: 'BlogListView',
  props: {
    blogs: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {
    gotoDetail(blog) {
      const form = new FormData()
      form.append('id', blog.id)
      form.append('views', blog.views)

      indexApi.updateViews(form).then(response => {
        if (response.code === 20000) {
          this.$router.push({
            path: '/detail',
            query: blog
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.blogs {
  width: 100%;
  height: 100%;

  .list {
    width: 80%;
    height: auto;
    margin: 0 auto 30px auto;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #eaeefb;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

    .content {
      width: 100%;
      height: 220px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;

      .left {
        width: 70%;
        height: 100%;
        padding-right: 30px;
        box-sizing: border-box;
        text-align: left;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;

        .sub_title {
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 25px;
          cursor: pointer;
        }

        .sub_content {
          width: 100%;
          height: auto;
          line-height: 30px;
          color: #666;
          margin-top: 35px;
          letter-spacing: 1px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }

        .sub_bottom {
          width: 100%;
          height: 40px;
          line-height: 40px;
          margin-top: 35px;

          .detail {
            float: left;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: center;

            .el-image {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              margin-right: 10px;
              position: relative;
              vertical-align: middle;
              max-width: 100%;
            }
            .name {
              font-weight: bold;
              margin-right: 15px;
              color: #4183c4;
            }
            .time {
              margin-right: 15px;
            }
            .views {
              margin-right: 15px;
            }
            .comment {
              margin-right: 15px;
            }
          }

          .flag {
            float: right;
            height: 100%;
            line-height: 25px;
            color: #0bbd87;
            border: 1px solid #0bbd87;
            padding: 8px;
            box-sizing: border-box;
            border-radius: 5px;
          }
        }
      }
      .right {
        width: 30%;
        height: 100%;

        .el-image {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }
    }
  }
}
</style>
